<!DOCTYPE html>
<html>
<head>
    <title>测试POST交互数据</title>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(function(){
            // post-form提交
            $("#post-form").click(function () {
                // 标准ajax-form提交
                $.ajax({
                    type: 'POST',
                    url: "/dataInteraction/testPostFormVar",
                    contentType: "application/x-www-form-urlencoded; charset=UTF-8", // ajax的contentType默认为form提交，该配置可以省略
                    data:{
                        "username": "TEC-9",
                        "password": "wodemima"
                    },
                    success : function(data,status){
                        console.log("数据: \n" + JSON.stringify(data) + "\n状态: " + status);
                    }
                });
            });

            // post-json提交
            $("#post-json").click(function () {
                $.ajax({
                    type: 'POST',
                    url: "/dataInteraction/testPostJsonVar",
                    contentType: "application/json; charset=utf-8",
                    data:JSON.stringify({
                        "username": "TEC-9",
                        "password": "wodemima"
                    }),
                    success : function(data,status){
                        console.log("数据: \n" + JSON.stringify(data) + "\n状态: " + status);
                    }
                });
            });

            // 错误1：form方式不能提交json字符串
            $("#testPostError1").click(function () {
                $.ajax({
                    type: 'POST',
                    url: "/dataInteraction/testPostVar",
                    data:JSON.stringify({
                        "username": "TEC-9",
                        "password": "wodemima"
                    }),
                    success : function(data,status){
                        console.log("数据: \n" + JSON.stringify(data) + "\n状态: " + status);
                    }
                });
            });

            // 错误2:json方式不能提交对象
            $("#testPostError2").click(function () {
                $.ajax({
                    type: 'POST',
                    url: "/dataInteraction/testPostVar",
                    contentType: "application/json; charset=utf-8",
                    data:{
                        "username": "TEC-9",
                        "password": "wodemima"
                    },
                    success : function(data,status){
                        console.log("数据: \n" + JSON.stringify(data) + "\n状态: " + status);
                    }
                });
            });

            // 错误3:  $.post(的content-type为application/x-www-form-urlencoded; charset=UTF-8
            $("#testPostError3").click(function () {
                $.post("/dataInteraction/testPostVar",
                    {
                        "username": "TEC-9",
                        "password": "wodemima"
                    },
                    function(data,status){
                        console.log("数据: \n" + JSON.stringify(data) + "\n状态: " + status);
                    }
                );
            });
        });
    </script>
</head>
<body>
<h1></h1>
<div>
    <table>
        <thead>
        <tr>
            <td>请求地址</td>
            <td>期待结果</td>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td><button id="post-form">标准的ajax-form提交验证</button></td>
            <td>testVar2</td>
        </tr>
        <tr>
            <td><button id="post-json">标准的ajax-post提交验证</button></td>
            <td>testVar2</td>
        </tr>
        <tr>
            <td><button id="testPostError1">错误1：form方式不能提交json字符串</button></td>
            <td>testVar2</td>
        </tr>
        <tr>
            <td><button id="testPostError2">错误2：json方式不能提交对象</button></td>
            <td>testVar2</td>
        </tr>
        <tr>
            <td><button id="testPostError3">错误3：$.post默认的content-type</button></td>
            <td>testVar2</td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>